<template>
  <div class="addGift">
    <el-dialog
      title="添加礼包"
      :visible.sync="isVisible"
      @close="closeDialog"
      center
      :close-on-click-modal="false"
    >
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="120px"
      >
        <el-form-item label="礼包名称" prop="giftTitle">
          <el-input
            type="text"
            placeholder="请输入礼包名称"
            v-model="formdata.giftTitle"
            maxlength="24"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="礼包类型" prop="giftType">
          <el-radio-group v-model="formdata.giftType">
            <el-radio :label="1">常驻礼包</el-radio>
            <el-radio :label="2">充值礼包</el-radio>
            <el-radio :label="3">限时充值礼包</el-radio>
          </el-radio-group>
          <el-button circle class="iconAlert chargeGift" @click="chargeGift"
            >?</el-button
          >
        </el-form-item>
        <el-form-item
          label="金额设置"
          prop="giftMoney"
          v-if="formdata.giftType == 3 || formdata.giftType == 2"
        >
          <el-input
            type="number"
            placeholder
            v-model="formdata.giftMoney"
            autocomplete="off"
            class="giftMoney"
            oninput="value=value.replace(/[^\d]/g,'')"
            onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
            onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"
          ></el-input>
          <span></span>
        </el-form-item>
        <el-form-item
          label="金额统计时间"
          required
          v-if="formdata.giftType == 3"
        >
          <div style="display: inline-block; width: 200px">
            <el-form-item prop="mstartTime">
              <el-date-picker
                v-model="formdata.mstartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="display: inline-block; margin: 0 10px">-</div>
          <div style="display: inline-block; width: 200px">
            <el-form-item prop="mendTime">
              <el-date-picker
                v-model="formdata.mendTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                :picker-options="endOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="礼包展示时间" required class="data">
          <div style="display: inline-block; width: 200px">
            <el-form-item prop="createTime">
              <el-date-picker
                v-model="formdata.createTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="display: inline-block; margin: 0 10px">-</div>
          <div style="display: inline-block; width: 200px">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="formdata.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="关联游戏" prop="gameId">
          <el-select
            v-model="formdata.gameId"
            placeholder="输入游戏名搜索"
            filterable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.gameName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="礼包码" prop="codeType" required>
          <el-radio-group v-model="formdata.codeType">
            <el-radio :label="0">普通礼包码</el-radio>
            <el-radio :label="1">通用礼包码</el-radio>
          </el-radio-group>

          <el-button
            circle
            class="iconAlert codealert common"
            @click="codeclain"
            >?</el-button
          >
          <el-button
            circle
            class="iconAlert codealert charge"
            @click="chargeclain"
            >?</el-button
          >
        </el-form-item>
        <el-form-item prop="general_code" v-if="formdata.codeType == 0">
          <el-input
            type="textarea"
            placeholder="每行一个礼包码，请保证礼包码输入正确"
            v-model="formdata.general_code"
          ></el-input>
        </el-form-item>
        <el-form-item prop="commom_code" v-if="formdata.codeType == 1">
          <el-input
            type="input"
            class="commom_code"
            placeholder="输入框只可以输入一个礼包码，请保证礼包码输入正确"
            v-model="formdata.commom_code"
          ></el-input>
        </el-form-item>
        <el-form-item label="礼包内容" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入该礼包所包含的物品内容"
            v-model="formdata.content"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="使用方法" prop="method">
          <el-input
            type="textarea"
            placeholder="请输入礼包使用方法&使用条件"
            v-model="formdata.method"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')"
          >确 定</el-button
        >
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addGift } from "@/api/giftManage";
import { getOptionList } from "@/api/gameManage";
export default {
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      formdata: {
        giftTitle: "",
        giftType: 1,
        giftMoney: "",
        gameId: "",
        mstartTime: "",
        mendTime: "",
        commom_code: "",
        general_code: "",
        content: "",
        method: "",
        createTime: "",
        endTime: "",
        codeType: 0,
      },
      options: [],
      rules: {
        giftTitle: [
          { required: true, message: "请输入礼包名称", trigger: "blur" },
        ],
        giftType: [
          { required: true, message: "请输入礼包类型", trigger: "blur" },
        ],
        giftMoney: [
          { required: true, message: "金额不能为空", trigger: "blur" },
        ],
        gameId: [
          { required: true, message: "请选择关联游戏", trigger: "blur" },
        ],
        mstartTime: [
          { required: true, message: "请添加开始时间", trigger: "blur" },
        ],
        mendTime: [
          { required: true, message: "请添加结束时间", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请添加开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请添加结束时间", trigger: "blur" },
        ],
        general_code: [
          { required: true, message: "请添加礼包码", trigger: "blur" },
        ],
        commom_code: [
          { required: true, message: "请添加礼包码", trigger: "blur" },
        ],
        content: [{ required: true, message: "请添加内容", trigger: "blur" }],
        method: [
          { required: true, message: "请添加使用方法", trigger: "blur" },
        ],
      },
      endOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.mstartTime;
          if (delay) {
            return time.getTime() < new Date(delay).getTime() - 8.64e7;
          } else {
            return true;
          }
        },
      }
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
    isedit: Boolean,
  },
  mounted() {
    getOptionList().then((res) => {
      this.options = res.data.list;
    });
    this.getNowTime();
  },
  methods: {
    getNowTime() {
      var now = new Date();
      var year = new Date().getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date} 00:00:00`;
      var endDate = `${year + 3}-${month}-${date} 00:00:00`;
      this.formdata.createTime = defaultDate;
      this.formdata.endTime = endDate;
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = Object.assign({}, this.formdata);
          var codeFlag = true;

          if (this.formdata.codeType == 0) {
            var str = this.formdata.general_code;
            para.commom_code = "";
            str = str.replace(/\n/g, ",");
            var strArr = str.split(",");
            para.general_code = str;
            strArr.some((value, index) => {
              if (value.length == 0) {
                this.$message({
                  message: "检测礼包码里含有空行，请检查后再添加",
                  type: "warning",
                });
                codeFlag = false;
                return true;
              }
            });
          } else {
            para.general_code = "";
          }
          if (codeFlag == true) {
            if (
              new Date(this.formdata.mstartTime) >
              new Date(this.formdata.mendTime)
            ) {
              this.$message.error("金额统计时间的开始时间不能大于结束时间");
            } else {
              addGift(para)
                .then((res) => {
                  this.$message({
                    message: "创建成功！",
                    type: "success",
                  });
                  setTimeout(() => {
                    this.reload();
                  }, 20);
                })
                .catch((error) => {});
              this.isVisible = false;
            }
          }
        }
      });
    },
    codeclain() {
      this.$alert(
        "礼包码填写为单行只能有一个礼包码，需要进行换行填写。礼包码添加可点击编辑后在新的输入框里填写。<br>当礼包码数量低于100个时，礼包数字会红色显示，提示补仓，点击补仓按钮可直接进行礼包码添加。",
        "普通礼包码",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    chargeclain() {
      this.$alert(
        "一个通用礼包只绑定一个礼包码，选择后只可以填写一个礼包码。该礼包不限制领取次数，与领取小号数。（每个游戏小号只可以领取一次）",
        "通用礼包码",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    chargeGift() {
      this.$alert(
        "限时充值礼包创建后，在限时充值统计时间内将不能进行礼包删除操作，请注意。",
        "限时充值礼包",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
  },
};
</script>
<style lang="scss">
.addGift {
  input::-webkit-inner-spin-button {
    display: none;
  }
  .el-textarea__inner,
  .el-textarea {
    width: 440px;
    height: 132px;
  }
  .el-textarea__inner::placeholder {
    font-size: 12px;
  }
  .el-radio__label {
    font-size: 13px;
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    color: #a5a4bf !important;
  }
  .el-input {
    width: 300px;
  }
  .el-select .el-input {
    width: 200px;
  }
  .el-date-editor.el-input,
  .giftMoney.el-input {
    width: 200px;
  }
  .el-form-item__label {
    padding: 0 20px 0 0;
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-form-item__content {
    margin-bottom: 20px;
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 460px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .chargeGift {
      width: 15px;
      height: 15px;
      line-height: 15px;
      left: 325px;
      font-size: 12px;
      top: 14px;
    }
    .codealert {
      width: 15px;
      height: 15px;
      line-height: 15px;
      font-size: 12px;
      top: 14px;
    }
    .common {
      left: 95px;
    }
    .charge {
      left: 205px;
    }
    .iconAlert,
    .el-input__inner,
    .el-textarea__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder,
    .el-textarea__inner::placeholder {
      color: #a5a4bf;
    }
  }
  .data {
    .el-form-item__content {
      margin-bottom: 10px;
    }
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    border: 1px solid #a5a4bf;
    background-color: #f5f7fa;
    cursor: not-allowed;
  }
  .el-textarea__inner {
    resize: none;
  }
  .general_code.el-input {
    display: block;
    width: 440px;
  }
}
</style>